<template>
  <div>
    <h2 style="font-size: 50px; color: brown">组件通信</h2>
    <div class="body">
      <!-- 导航区 -->
      <div class="left">
        <div class="link">
          <RouterLink
            :to="{ name: 'props' }"
            class="font"
            active-class="font2"
            @click="isNavActive = true"
            >props组件通信</RouterLink
          >
        </div>
        <div class="link">
          <RouterLink
            :to="{ name: 'custum' }"
            class="font"
            active-class="font2"
            @click="isNavActive = true"
            >自定义事件</RouterLink
          >
        </div>
        <div class="link">
          <RouterLink
            :to="{ name: 'mitt' }"
            class="font"
            active-class="font2"
            @click="isNavActive = true"
            >mitt</RouterLink
          >
        </div>
        <div class="link">
          <RouterLink
            :to="{ name: 'model' }"
            class="font"
            active-class="font2"
            @click="isNavActive = true"
            >v-model</RouterLink
          >
        </div>
        <div class="link">
          <RouterLink
            :to="{ name: 'attrs' }"
            class="font"
            active-class="font2"
            @click="isNavActive = true"
            >$attrs</RouterLink
          >
        </div>
        <div class="link">
          <RouterLink
            :to="{ name: '$refs-$parent' }"
            class="font"
            active-class="font2"
            @click="isNavActive = true"
            >$refs-$parent</RouterLink
          >
        </div>
        <div class="link">
          <RouterLink
            :to="{ name: 'provide-inject' }"
            class="font"
            active-class="font2"
            @click="isNavActive = true"
            >provide-inject</RouterLink
          >
        </div>
        <div class="link">
          <RouterLink
            :to="{ name: 'pinia' }"
            class="font"
            active-class="font2"
            @click="isNavActive = true"
            >pinia</RouterLink
          >
        </div>
        <div class="link">
          <RouterLink
            :to="{ name: 'slot' }"
            class="font"
            active-class="font2"
            @click="isNavActive = true"
            >slot(默认插槽)</RouterLink
          >
        </div>
        <div class="link">
          <RouterLink
            :to="{ name: 'slot2' }"
            class="font"
            active-class="font2"
            @click="isNavActive = true"
            >slot(具名插槽)</RouterLink
          >
        </div>
        <div class="link">
          <RouterLink
            :to="{ name: 'slot3' }"
            class="font"
            active-class="font2"
            @click="isNavActive = true"
            >slot(作用域插槽)</RouterLink
          >
        </div>
      </div>
      <!-- 展示区 -->
      <div class="right">
        <RouterView></RouterView>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { RouterView, RouterLink } from "vue-router";
import { ref } from "vue";
const isNavActive = ref(false);
</script>

<style scoped>
.body {
  height: 1200px;
  box-shadow: 0 0 3px black;
  border-radius: 10px;
  display: flex;
  padding: 20px;
}

.body .left {
  height: 1200px;
  width: 300px;
  /* border-radius: 10px;
  box-shadow: 0 0 3px black; */
}
.font {
  font-size: 30px;
  color: black;
  text-decoration: none;
  transition: color 0.3s ease;
}

.font:hover {
  /* 鼠标悬停时的文字颜色 */
  color: white;
}

.font2 {
  font-size: 30px;
  color: black;
  text-decoration: none;
  background-size: 100px;
  border-radius: 6px;
}

.body .right {
  height: 1200px;
  width: 1200px;
  margin-left: 40px;
  border-radius: 10px;
  box-shadow: 0 0 3px black;
}

.link {
  display: block; /* 必须设为块级，否则margin垂直方向无效 */
  /* 核心：强制上下间距（用 !important 排除优先级问题） */
  margin: 15px 0 !important;
  /* 其他样式保持不变 */
  border: 3px solid #ddd;
  border-radius: 6px;
  padding: 25px 0 25px 0;

  font-size: 30px;
  color: #333;
  text-decoration: none;
  transition: all 0.5s ease;
  text-align: center;
}

.link:hover {
  background-color: rgb(31, 31, 31);
}

.link2 {
  display: block; /* 必须设为块级，否则margin垂直方向无效 */
  /* 核心：强制上下间距（用 !important 排除优先级问题） */
  margin: 15px 0 !important;
  /* 其他样式保持不变 */
  border: 3px solid #ddd;
  border-radius: 6px;
  padding: 20px 0 20px 0;

  font-size: 30px;
  color: #333;
  text-decoration: none;
  transition: all 0.5s ease;
  text-align: center !important;
}
</style>
